<script setup lang="ts">
import { ElOption, ElSelect } from 'element-plus'
import { sysDictionaryEncoApi } from '@/api'

defineOptions({
  inheritAttrs: false,
})
const props = defineProps<{
  code: string
  defaultFirstItem?: boolean
  optionClass?: string
}>()
const value = defineModel<string | number>()
const options = ref<
  { dicKey: string, dicValue: string, [key: string]: any }[]
>([])

async function getOptions() {
  const code = props.code
  if (!code)
    return
  const { data } = await sysDictionaryEncoApi.queryList(code)
  options.value = data
  if (props.defaultFirstItem) {
    value.value = data[0].dicKey
  }
}

watchEffect(() => {
  getOptions()
})
</script>

<template>
  <ElSelect v-model="value" class="width-fill" clearable v-bind="$attrs">
    <ElOption
      v-for="option in options"
      :key="option.dicValue"
      :class="optionClass"
      :label="option.dicValue"
      :value="option.dicKey"
    />
  </ElSelect>
</template>
